<script setup>
import { getUserListHandler,deleteUserHandler } from '../../api/user.js'
import { ElMessage,ElMessageBox  } from 'element-plus'
import {onBeforeMount, reactive, toRefs, ref } from "vue";
import Add from './Add.vue'

// loading 为true是 是加载状态，在数据加载成功后，把 loading.value设置成false 停止转圈
const loading = ref(true)
const addUserDialog =ref(false)
const  data = reactive({
   items: [],
  userForm:{
    name: "",
    password:"",
    mail:"",
    phone:""
  }
})
const defaultMethod=ref("Create")


// 使用api/user.js中封装好的方法 axios 获取后端接口数据
const getUserList = ()=>{
  loading.value =true
  getUserListHandler().then((response)=>{
    console.log(response.data.data.list)
    data.items = response.data.data.list
    console.log("打印items",data.items)
    loading.value =false
  })
}
// 使用vue组件生命周期，在组件被挂载之前执行动作
onBeforeMount(()=>{
  getUserList()
})

// 删除用户的方法
const deleteUser = (row)=>{

    ElMessageBox.confirm(
        '你确定要删除用户：' + row.name,
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
    ).then(() => {
            loading.value =true
            deleteUserHandler(row.identity)
                .then((response)=>{
                  ElMessage({
                    message: "删除成功",
                    type: 'success',
                  })
                  getUserList()
              loading.value =false
            })
        }).catch(() => {
          ElMessage({
            type: 'info',
            message: '取消删除',
          })
    })
}

// 添加用户
const addUser=()=>{
  data.userForm = {}
  defaultMethod.value= "Create"
  addUserDialog.value=true
}
// 编辑用户
const editUser=(row)=>{
  defaultMethod.value= "Edit"
  addUserDialog.value=true
  data.userForm = row
}

// 解构data中的items数组
const {items,userForm} = toRefs(data)
const getListAddDialog = ()=>{
  //getUserList()
  addUserDialog.value=false
}
const closeDialog=()=>{
  // 关闭添加程序的窗口时 更新数据
  getUserList()
}
const rollback =()=>{
  addUserDialog.value=false
  getUserList()
}


</script>

<template>
  <el-card v-loading="loading" element-loading-text="玩命加载中..." class="box-card">
    <template #header>
      <div class="card-header">
        <span>用户列表</span>
        <el-button class="button" text @click="addUser()" >添加用户</el-button>
      </div>
    </template>
    <!--  放真实数据的地方  -->
    <el-table
        border
        height="480"
        :data="items"
        style="width: 100%"
    >
      <el-table-column  fixed sortable       prop="name" label="用户名" width="180" />
      <el-table-column  sortable  prop="ID" label="ID" width="180" />
      <el-table-column prop="phone" label="手机号" width="180" />
      <el-table-column prop="mail" label="邮箱" width="180" />
      <el-table-column prop="CreatedAt" label="创建时间" width="260" />
      <el-table-column prop="identity" label="用户标识" width="350" />
      <el-table-column fixed="right" label="操作" >
        <!--  插槽的 scope 可以绑定行的数据  scope.row 获取一行的数据    -->
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editUser(scope.row)">编辑</el-button>
          <el-button link type="warning" size="small" @click="deleteUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <el-dialog

      destroy-on-close
      @close="closeDialog()"
      v-model="addUserDialog"
      :title=" defaultMethod === 'Create'?'添加用户':'更新用户' "
      width="500px" >
    <Add :user-form="userForm" :method="defaultMethod"  @rollback="rollback()"></Add>
  </el-dialog>
</template>

<style scoped>
.card-header{
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
</style>